<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue组件基础入门</title>
</head>
<body>
  <div id="app">
    <!-- step3： 使用组件 -->
    <!-- <my-love></my-love>
    <my-love></my-love>
    <my-header></my-header> -->
    <my-main></my-main>
  </div>

  <!-- 第三种写法 先实现 template 标签 -->
  <template id="my_main">
    <div>
      <h2>这是使用 template 模板标签实现的 组件</h2>
      <my-header></my-header>
    </div>
  </template>

</body>
<script src="./src/vue.js"></script>
<script>
  // 使用组件的主要步骤：
  // 全局组件
  // 第一种实现组件的方式：
  // step1: 声明(定义)组件
  // Vue.extend()
  let myLove = Vue.extend({
    template: '<h2>这是使用Vue.extend创建的组件<span>112223</span></h2>'
  });
  /**
   *  template属性是用来设置模板中的html结构，是Vue中的关键字，不能修改。
   *  template中的html结构只能有且只有一个根节点
  */

  // step2: 注册组件
  // 第一个参数是组件的名称（自定义的标签的名称), 第二个参数是模板对象
  // Vue.component('myLove', myLove);
  // 友情提示建议后大家在取组件名的时候采用  - 的方式  my-love
  Vue.component('my-love', myLove);
  // 为什么明明取名为 myLove的标签的名称在使用时候不能用这种大小写的方式？
  /* 答：这种问题的出现是因为html元素标签是不区分大小写的，默认都是小写
  不兼容大写的标签方式，所以不能再html中使用大小写的方式来写标签
  如果在注册组件时候使用了大写来取名组件，则在使用的时候使用  '-' 的方式 来解决这个问题
  例如： myLove = my-love
  */


  // 第二种写法
  // 直接注册
  Vue.component('my-header', {
    template: '<div>这是页头</div>'
  });

  // 第三种写法【 强烈推荐 】
  // 第一种和第二种写法不是很和谐智能，没有提示容易出错
  // 第三种写法首先 在 html 结构中中 定义 一个 叫 template 模板标签
  Vue.component('my-main', {
    template: '#my_main'
  });

  const vm = new Vue({
    el: '#app',
    data: {

    }
  });
</script>
</html>